<template>
  <div>
    <a-form @submit="orgSubmit" :form="form" style="width:40%;;margin:0 auto;">
      <a-form-item v-bind="formItemLayout" label="手机号">
        <span class="ant-form-text">18******17</span>
        <a-button v-if="issend" @click="getCode">发送验证码</a-button>
        <a-button v-if="!issend" disabled type="primary">{{ count }}s后可再次发送</a-button>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="验证码">
        <a-input
          name="captcha"
          v-decorator="[
                      'captcha',
                      {rules: [{ required: true, message: '请输入验证码!' },{validator: validateverCode}],validateTrigger: 'blur'}
                    ]"
          placeholder="请输入验证码"
        />
      </a-form-item>
      <div style="text-align:center;">
        <a-button size="large" htmlType="submit" type="primary">下一步</a-button>
      </div>
    </a-form>
    <a-modal title="登录密码重置成功！" v-model="visible" :footer="null">
      <div style="text-align:center;">
        <a-button type="primary" @click="gologin">重新登录</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import GlobalFooter from "../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";

const ATabPane = ATabs.TabPane;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    GlobalFooter,
    ATabPane,
    ATabs,
    AForm
  },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      logging: false,
      error: "",
      per: false,
      login: false,
      issend: true,
      phone: false,
      phonevalue: "",
      Confirm: false, //验证码验证是否成功
      emailvalue: "",
      verCode: "",
      count: "",
      timer: "",
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 }
        }
      }
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    handleChange(value) {
      console.log(value);
    },
    getCode() {
      const data = {
        mobileNo: this.phonevalue,
        email: this.emailvalue,
        memberType: "CB"
      };
      api.getcode(
        data,
        res => {
          if (res.code == "OK") {
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.issend = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.issend = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.issend = true;
            this.$message.warning(res.message);
          }
          console.log("res", res);
        },
        err => {
          console.log(err);
        }
      );
    },
    orgSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.visible = true;
          console.log("Received values of form: ", values);
          //   this.codeConfirm();
        }
      });
    },
    handleOk() {
      this.$router.push("/home");
    },
    gologin() {
      this.visible = false;
      this.$router.push("/home");
    },
    validateverCode(rule, value, callback) {
      const reg = new RegExp("^[0-9]{4,10}$");
      if (value && !reg.test(value)) {
        callback("您输入的验证码有误！");
      } else {
        this.verCode = value;
      }
      callback();
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
</style>
